import { TableColumn } from "@/components/GuatTable/types";
import {
  SignInPropertyMap as SIPM,
  SignInMemberInfo as SIMI,
} from "@/map/attendance/sign-in/property-map";
import { SignInMemberStatus as SIMS } from "@/constant/dictionary";
import { Action } from "@/components/GuatActions/types";
import { Image, TableColumnData, Tag } from "@arco-design/web-vue";
import { RouteName } from "@/constant/route";
import Actions from "@/components/GuatActions/index.vue";

interface Methods {
  chk: () => void;
  signIn: (member: any) => void;
  pmt: () => void;
  rjt: () => void;
}

type SignInStatus = "default" | "signIn" | "unSignIn" | "leave" | "askForLeave";

export const createTableColumns = (methods: any): TableColumn[] => {
  const router = useRouter();
  return [
    {
      title: "标题",
      dataIndex: SIPM.Title,
    },
    {
      title: "开始时间",
      dataIndex: SIPM.StartTime,
    },
    {
      title: "结束时间",
      dataIndex: SIPM.EndTime,
    },
    {
      title: "当前状态",
      render: ({ [SIPM.Status]: status }) => {
        if (status == 0)
          return (
            <Tag size="large" color="red">
              未开始
            </Tag>
          );
        else if (status == 1)
          return (
            <Tag size="large" color="green">
              签到中
            </Tag>
          );
        else return <Tag size="large">已结束</Tag>;
      },
    },
    {
      showTitle: false,
      render: ({ [SIPM.No]: _no, [SIPM.Status]: status }) => {
        const { del, upd, chk }: Record<"del" | "upd" | "chk", Action> = {
          del: { internal: "delete", onClick: methods.del },
          upd: { internal: "edit", onClick: methods.upd },
          chk: { internal: "check", onClick: methods.check },
        };
        const actions: Action[] = [del];
        switch (status) {
          case 0:
            actions.push(upd);
            break;
          default:
            actions.push(chk);
        }

        return <Actions actions={actions} />;
      },
    },
  ];
};

export const createSignInInfoTableColumns = (
  status: Ref<SignInStatus>,
  m: Methods
): TableColumn[] => {
  const cols: Recordable<TableColumn> = {
    name: {
      title: "姓名",
      dataIndex: SIMI.Name,
    },
    no: {
      title: "学号",
      dataIndex: SIMI.No,
    },
    signInTime: {
      title: "签到时间",
      dataIndex: SIMI.Time,
    },
    leaveTime: {
      title: "请假时间",
      dataIndex: SIMI.LeaveTime,
    },
    leaveReason: {
      title: "请假理由",
      dataIndex: SIMI.LeaveReason,
    },
    auditor: {
      title: "审批人",
      dataIndex: `${SIMI.Auditor}.userName`,
    },
    state: {
      title: "当前状态",
      render: ({ [SIMI.Status]: status }) => {
        const color = {
          [SIMS.SIGN_IN]: "green",
          [SIMS.NOT_SIGN_IN]: "red",
          [SIMS.PERMITTED]: "cyan",
          [SIMS.NOT_READ]: "purple",
        };
        return (
          <Tag size="large" color={color[status]}>
            {SIMS[status as 0]}
          </Tag>
        );
      },
    },
    image: {
      title: "签到照片",
      render: () => {
        return (
          <Image
            width={40}
            height={40}
            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
          />
        );
      },
    },
    actions: {
      title: "操作",
      width: 180,
      render: (record) => {
        const { whd, chk, sign, pmt, rjt }: Record<string, Action> = {
          whd: { internal: "withdraw", color: "red" },
          chk: { internal: "check", onClick: m.chk },
          sign: {
            icon: "ph:calendar-check",
            color: "blue",
            onClick: () => m.signIn(record),
          },
          pmt: { icon: "ph:checks", color: "green", onClick: m.pmt },
          rjt: { icon: "ph:x", color: "red", onClick: m.rjt },
        };
        const _actions = {
          [SIMS.SIGN_IN]: [chk, whd],
          [SIMS.NOT_SIGN_IN]: [sign],
          [SIMS.PERMITTED]: [chk],
          [SIMS.NOT_READ]: [chk, pmt, rjt],
          [SIMS.REFUSED]: [chk],
        };
        return <Actions actions={_actions[record[SIMI.Status]]} />;
      },
    },
  };
  switch (status.value) {
    default:
      return [cols.name, cols.no, cols.signInTime, cols.state, cols.actions];
    case "signIn":
      return [cols.name, cols.no, cols.signInTime, cols.image, cols.actions];
    case "unSignIn":
      return [cols.name, cols.no, cols.actions];
    case "leave":
      return [cols.name, cols.no, cols.leaveTime, cols.leaveReason, cols.auditor, cols.actions];
    case "askForLeave":
      return [cols.name, cols.no, cols.leaveTime, cols.leaveReason, cols.actions];
  }
};

export const createGroupTableColumns = (methods: any): TableColumn[] => {
  return [
    {
      title: "分组名称",
      dataIndex: "name",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
    },
    {
      title: "分组人数",
      render: ({ numberOfMember }) => <>{`${numberOfMember}人`}</>,
    },
    {
      title: "当前状态",
      render: ({ status }) => {
        const isUse = status == 0;
        return (
          <Tag size="large" color={isUse ? "green" : "red"}>
            {isUse ? "启用" : "禁用"}
          </Tag>
        );
      },
    },
    {
      title: "操作",
      render: () => (
        <Actions
          actions={[
            { internal: "edit", onClick: methods.edit },
            { internal: "delete", onClick: methods.del },
          ]}
        />
      ),
    },
  ];
};

export const selectMemberTable: TableColumnData[] = [
  { title: "姓名", align: "center", dataIndex: "userName" },
  { title: "学号", align: "center", dataIndex: "userNo" },
  { title: "班级", align: "center", dataIndex: "userClass" },
];
